<template>
	<view>
		<!-- 搜素 -->
		<search></search>
		<!-- 导航 -->
		<view class="tabs">
			<view class="tabs_title">
				<view class="title_item" :class="item.isAcitice?'active':''" v-for="item in tabs" :key="item.id" @click="changId(item.id)">
					{{item.value}}
				</view>
			</view>
		</view>
		<!-- 内容区 -->
		<view class="content" v-for="item in goodList" @click="getnav(item.goods_id)">
			<view class="content_left">
				<view v-if="item.goods_big_logo">
					<image :src="item.goods_big_logo" mode="widthFix"></image>
				</view>
				<view v-else>
					<image src="/static/nofund.jpg" mode="widthFix"></image>
				</view>
			</view>
			<view class="content_right">
				<view class="item_name">
					{{item.goods_name}}
				</view>
				<text>￥:{{item.goods_price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import search from "../../components/serch.vue"
	import tabs from "../../components/tabs.vue"
	export default {
		data() {
			return {
				id:'',
				keyword:'',
				goodList:[],
				pagenumL:1,
				tabs:[
					{
						id:0,
						value:"综合",
						isAcitice:true
					},
					{
						id:1,
						value:"销量",
						isAcitice:false
					},
					{
						id:3,
						value:"价格",
						isAcitice:false
					}
				]
			}
		},
		totalPage:1,
		onLoad(res) {
			console.log("hhh",res.query)
			this.keyword=res.query 
			this.id=res.cid 
			this.getdata()
		},
		methods: {
		async getdata(){
			if(this.id){
				const res=await this.$myRequest({
					url:'/api/public/v1/goods/search?cid='+this.id
					 })
					 console.log(res.data.message)
					 // 总页数
					const total=res.data.message.total
					// 计算总页数
					this.totalPage=Math.ceil(total/this.pagenumL)
					// 数据拼接
					 this.goodList=[...this.goodList,...res.data.message.goods]
			}
			if(this.keyword){
				const key=await this.$myRequest({
					url:'/api/public/v1/goods/qsearch?query='+this.keyword
					 })
					 console.log("tt",key)
				this.goodList=key.data.message.goods
			}
			},
			changId(res){
				
			},
			getnav(res){
				uni.navigateTo({
					url:'/pages/good_detail/good_detail?goods_id='+res
				})
			}
			
		},
		components:{
			search:search,
			tabs:tabs
		},
		onReachBottom() {
			if(this.pagenumL>this.totalPage){
				uni.showToast({
					icon:"none",
					title:"没有下一页数据了"
				})
			}else{
				this.pagenumL++
				this.getdata()
			}
		}
	}
</script>

<style lang="less">
   .tabs{
	   .tabs_title{
		   display: flex;
	   }
	   .title_item{
		   display: flex;
		   justify-content: center;
		   align-items: center;
		   padding: 15rpx 0;
		   flex: 1;
	   }
   }
   .active{
	   color: #b50e03;
	   border-bottom: 5rpx solid currentColor;
   }
   .content{
	   margin-top: 5rpx;
	   display: flex;
	   border-bottom: 1rpx solid #eee;
	   .content_left{
		   flex: 2;
		   padding: 0 10rpx;
		   text-align: center;
		   image{
			   width: 80%;
		   }
	   }
	   .content_right{
		   display: flex;
		   flex-direction: column;
		   justify-content: space-around;
		   flex: 3;
		.item_name{
			// 2
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
		}
		text{
			color:#b50e03;
			font-size: 35rpx;
		}
	   }
   }
</style>
